<template>
  <div>
      <p>store的使用示例</p>
      <p>更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。</p>
      <p>money:{{$store.state.money}}</p>
      <p>今年的年龄：{{$store.state.age}}</p>
      <p>明年的年龄：{{$store.getters.nextAge}}</p>
      <button @click="big">按时长大</button>
      <br>
      <input type="text" v-model="val" @keyup.enter="charge">
      <button @click="charge1">对象风格</button>
      <hr>
      <p>模块中的数据</p>
      <p>商品名称：{{$store.state.goods.name}}</p>
      <p>会员积分：{{$store.state.user.point}}</p>
  </div>
</template>

<script>

// 导入type的文件
import {changeMoney, changeMoney1} from '../store/mutation-types'
export default {
    data() {
        return {
            val: 1
        }
    },
    methods: {
        big() {
            this.$store.commit('beOld');
        },
        // 充值
        charge() {
            this.$store.commit(changeMoney, this.val * 1)
        },
        // 充值
        charge1() {
            this.$store.commit({
                type: changeMoney1,
                val: this.val * 1
            })
        },
        // 有后台的充值
        chargePro() {
            this.$store.dispatch('chargePro')
            // axios.post('/xxxxxx', {money: this.val*1})
            // .then(res => {
            //     console.log(res.data.money);
            //     // 从这里开始 已经是同步代码了 可以用mutation了
            //     this.$store.commit(changeMoney, res.data.money)
            // })
        }
    }
}
</script>

<style>

</style>